<style scoped>
</style>

<template>
    <div>
        <div id="chart1" style="width:500px;height:500px;"></div>

    </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legendScroll");
export default {
  data() {
    return {
      picture: {
        0: {
          "p.V981Ffs*88": [
            { id: 1, mutationType: "A" },
            { id: 2, mutationType: "A" },
            { id: 3, mutationType: "B" },
            { id: 4, mutationType: "B" },
            { id: 5, mutationType: "C" },
            { id: 6, mutationType: "C" },
            { id: 7, mutationType: "A" },
            { id: 8, mutationType: "A" },
            { id: 9, mutationType: "A" },
            { id: 10, mutationType: "A" }
          ],
          "p.S206F": [
            { id: 1, mutationType: "A" },
            { id: 2, mutationType: "A" },
            { id: 3, mutationType: "B" },
            { id: 4, mutationType: "B" },
            { id: 5, mutationType: "C" },
            { id: 6, mutationType: "C" }
          ]
        },
        1: {
          "p.M1?": [{ id: 1, mutationType: "A" }, { id: 2, mutationType: "A" }]
        },
        5: {
          "p.S206F": [{ id: 0, mutationType: "A" }]
        },
        10: {
          "p.S206F": [{ id: 0, mutationType: "C" }]
        }
      },
      typeColor: [
        {
          type: "A",
          color: "rgb(0, 204, 102)"
        },
        {
          type: "B",
          color: "rgb(0, 0, 255)"
        },
        {
          type: "C",
          color: "rgb(153, 51, 255)"
        }
      ],
      seriesData: [
        {
          name: "A",
          type: "bar",
          stack: "group",
          data: [1,3,5,5]
        },
        {
          name: "B",
          type: "bar",
          stack: "group",
          data: [1,3,5,5]
        },
        {
          name: "C",
          type: "bar",
          stack: "group",
          data: [1,3,5,5]
        }
      ]
    };
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById("chart1"));
      app.title = "堆叠柱状图";

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          // data:['邮件营销','联盟广告','视频广告']
          data: ["A", "B", "C"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            data: Object.keys(this.picture)
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: this.seriesData
        // [
        //   {
        //     name: "邮件营销",
        //     type: "bar",
        //     stack: "广告",
        //     data: [120, 132, 101, 134, 90, 230, 210]
        //   },
        //   {
        //     name: "联盟广告",
        //     type: "bar",
        //     stack: "广告",
        //     data: [220, 182, 191, 234, 290, 330, 310]
        //   },
        //   {
        //     name: "视频广告",
        //     type: "bar",
        //     stack: "广告",
        //     data: [150, 232, 201, 154, 190, 330, 410]
        //   }
        // ]
      };

      myChart.setOption(option);
    },
    getData() {
      // this.seriesData
      let parents = Object.keys(this.picture); //获得0 1 5 10
      for (let i = 0; i < parents.length; i++) {
        let parentKey = parents[i]; //获取对象的键值
        //再获取键值对应的值 将子对象下的数组合并按颜色分组计算
        let newObject = [];
        let eachColorvalue = [];
        Object.keys(this.picture[parentKey]).forEach(childKey => {
          newObject = newObject.concat(this.picture[parentKey][childKey]);
        });

        for (let j = 0; j < this.typeColor.length; j++) {
          let countByColor = newObject.filter(
            item => item.mutationType == this.typeColor[j].type
          );
          // console.log(countByColor)
          eachColorvalue.push({
            color: this.typeColor[j].type,
            count: countByColor.length
          });

          this.seriesData.push({
            name: this.typeColor[j],
            type: "bar",
            stack: "group"
          });
        }

        if (i == 0) {
          console.log(eachColorvalue);
        }
      }
      //       {
      //   name: "A",  //n
      //   type: "bar",
      //   stack: "广告",
      //   data: [120, 132, 101, 134]
      // },
    }
  },
  mounted() {
    this.getData();
    this.initChart();
  }
};
</script>


